<template>
	<div class="gcomment">
		<div class="gc-title">
			<div class="gc-all-txt">
				<span>用户评分</span>
				<span>⭐⭐⭐⭐⭐</span>
				<span class="haop">99%好评</span>
			</div>
			<div class="gc-choose">
				<div :class="theAll?'gcactive':'gcnoactive'" @click="change(true)">全部</div>
				<div :class="!theAll?'gcactive':'gcnoactive'" @click="change(false)">有图</div>
			</div>
		</div>
		<div class="gc-m-title"><span>最新评论</span></div>
		<div class="pinglun-area" v-for="(v,i) in plistArr">
			<div class="pinglun-cont">
				<div class="touxiang"><img src="../../../public/01.jpg" alt=""></div>
				<div class="pinglun-neirong">
					<div class="user-name">{{v.userName}}</div>
					<div class="pinglun-level">⭐⭐⭐⭐⭐</div>
					<div class="pinglun-wd">{{v.comContent}}</div>
				</div>
				<div class="pinglun-time">{{setTime(v.comTime)}}</div>
			</div>
		</div>
		<div class="gc-kongde"></div>
	</div>
</template>

<script>
	export default{
		name:'App',
		data(){
			return{
				theAll:true,
				plistArr:[]
			}
		},
		methods:{
			change(n){
				this.theAll=n;
				if(n){
					this.axios({
					    method:'get',
					    url:'http://115.28.137.176:8094/comment/selCom',
					    // headers:{
					    //   "token":"1111"
					    // },
					    params:{
					        "proId":"test008"
					    }
					}).then((res)=>{
						this.plistArr=res.data.data
						console.log(res)
					    
					}).catch(()=>{
					    console.log('网络错误')
					});
				}
				else{
					this.axios({
					    method:'get',
					    url:'http://115.28.137.176:8094/comment/selComOwnPic',
					    // headers:{
					    //   "token":"1111"
					    // },
					    params:{
					        "proId":"test008"
					    }
					}).then((res)=>{
						this.plistArr=res.data.data
						console.log(res)
					    
					}).catch(()=>{
					    console.log('网络错误')
					});
				}
			},
			
			setTime(time){
				let date = new Date(time)
				 return this.formatTime2(date);
			}
		},
		mounted(){
				this.axios({
				    method:'get',
				    url:'http://115.28.137.176:8094/comment/selCom',
				    // headers:{
				    //   "token":"1111"
				    // },
				    params:{
				        "proId":"test008"
				    }
				}).then((res)=>{
					this.plistArr=res.data.data
					console.log(res)
				    
				}).catch(()=>{
				    console.log('网络错误')
				});
			    
			
		}
	}
</script>

<style lang="less">
	@baseFontSize:20px;
	@baseSize:20;
	
	.px2rem(@name,@px){
	    @{name}:@px / @baseSize /2 * 1rem;
	}
	
	*{
		margin: 0;
		padding: 0;
	}
	
	html,body{
		height: 100%;
	}
	.gc-title{
		.px2rem(width,750);
		.px2rem(height,160);
		background: #ffffff;
		display: flex;
		flex-wrap: wrap;
		align-content: space-around;
	}
	.gc-all-txt{
		.px2rem(font-size,30);
		span{
			.px2rem(margin-left,30);
		}
	}
	.gc-choose{
		display: flex;
		div{
			.px2rem(width,175);
			.px2rem(height,45);
			border: 1px solid;
			.px2rem(margin-left,30);
			text-align: center;
			.px2rem(line-height,45);
			.px2rem(font-size,25);
			.px2rem(border-radius,10);
		}
	}
	.gc-m-title{
		.px2rem(width,750);
		.px2rem(height,85);
		.px2rem(line-height,85);
		background: #f8f8f8;
		color: #5e5e5e;
		.px2rem(font-size,30);
		span{
			.px2rem(margin-left,30);
		}
	}
	.gc-kongde{
		.px2rem(width,750);
		.px2rem(height,105);
	}
	.haop{
		.px2rem(font-size,25);
		color: #eb5527;
	}
	.gcactive{
		border-color: #eb5527;
		color: #eb5527;
	}
	.gcnoacttive{
		border-color: #7e7e7e;
		color: #7e7e7e;
	}
</style>
